<template>
	<view>
		<view class="gt-form-item">
			<view v-if="label" class="gt-form-label-group">
				<view class="row">
					<view class="gt-form-label-left"></view>
					<view class="gt-form-label-required">*</view>
					<view class="gt-form-label">{{label}}</view>
					<uni-icons v-if="desc" class="gt-form-desc" type="help" size="20" color="#999999"
						@click="showDesc()"></uni-icons>
				</view>
			</view>
			<view class="gt-form-body">
				<view class="gt-form-content">
					<!-- 左ICON & 左文字 -->
					<slot name="left">
						<view class="gt-form-content-left">
							<view class="gt-form-content-icon iconfont" :class="leftIcon"></view>
							<!-- <image src="/static/svg/email.svg" style="color: red;" mode="aspectFit" class="w-h-20"></image> -->
							<text class="gt-form-content-text"
								:class="leftIcon && leftText ? 'leftIconTextMargin' : ''">{{leftText}}</text>
						</view>
					</slot>
					<!-- 输入框 -->
					<input class="gt-form-input" :value="value" :placeholder="placeholder || desc || '请输入...'"
						:password="password" placeholder-style="" :placeholder-class="placeholderClass" :disabled="disabled"
						@input="changeInput" />
					<uni-icons v-if="clear && value !== ''" type="clear" size="24px" color="#C0C4CC" @click="clearValue()"
						style="cursor: pointer;"></uni-icons>
					<!-- 右ICON & 右文字 -->
					<slot name="right">
						<view class="gt-form-content-right" v-if="rightIcon || rightText">
							<text class="gt-form-content-text"
								:class="rightIcon && rightText ? 'rightIconTextMargin' : ''">{{rightText}}</text>
							<view class="gt-form-content-icon iconfont" :class="rightIcon"></view>
						</view>
					</slot>
				</view>

				<view v-if="error!== false" class="gt-form-error">{{error}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-input",
		props: {
			value: {
				type: [Number, String],
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			field: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			required: {
				type: [String, Boolean],
				default: ''
			},
			error: {
				type: [String, Boolean],
				default: false
			},
			placeholder: {
				type: [String, Boolean],
				default: ''
			},
			placeholderClass: {
				type: String,
				default: 'placeholderClass'
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: ''
			},
			password: {
				type: [String, Boolean],
				default: false
			},
			clear: {
				type: [String, Boolean],
				default: true
			},
			disabled: {
				type: [String, Boolean],
				default: false
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			}
		},
		created() {},
		data() {
			return {
				name: ''
			}
		},
		computed: {},
		methods: {
			changeInput(e) {
				// console.log(e);
				this.$emit('input', e.detail.value, this.field)
			},
			clearValue() {
				this.$emit('input', '', this.field)
			},
			showDesc() {
				uni.showModal({
					title: this.label,
					content: this.desc,
					showCancel: false
				})
			}
		}
	}
</script>

<style lang="scss">
</style>